<template>
	<view class="all">
		<image class="ima" :src="srcImage(edetail.photo_path)"></image>
		<view class="table">
			<view class="tit">| 活动名称</view>
			<view class="tab">
				<!-- <image src="/static/images/trumpet.png" style="width: 40rpx; height: 40rpx;"></image> -->
				<view class="pla">{{edetail.name}}</view>
			</view>
			<view class="tab">
				<!-- <image src="../../static/images/time.png" style="width: 40rpx; height: 40rpx;"></image> -->
				<view class="time">活动时间: {{toDate(edetail.start_time)}} 至 {{toDate(edetail.end_time)}} </view>
			</view>
			<view class="tab">
				<!-- <image src="../../static/images/address.png" style="width: 40rpx; height: 40rpx;"></image> -->
				<view v-if="edetail.place == null">
					<view class="pla">贵州民族大学新校区学生活动中心</view>
				</view>
				<view v-else>
					<view class="pla">{{edetail.place}}</view>
				</view>

			</view>
			<view class="tab">
				<!-- <image src="../../static/images/person.png" style="width: 40rpx; height: 40rpx;"></image> -->
				<view class="pla">报名数: {{edetail.number}} 人</view>
			</view>
		</view>
		<view class="tab1">
			<view class="tex">| 发起者</view>
			<view class="tab2">
				<image :src="srcImage(edetail.avatar_url)" style="width: 120rpx; height: 120rpx;border-radius: 50%;"></image>
				<view v-if="edetail.create_by == null">
					<view class="tex1">活动发起者：贵州民族大学</view>
				</view>
				<view v-else>
					<view class="tex1">活动发起者：{{edetail.create_by}}</view>
				</view>

			</view>
		</view>
		<view class="tab3">
			<view class="tex">| 活动详情</view>
			<view v-if="edetail.content == null">
				<view class="tex3">暂无活动详情！！！</view>
			</view>
			<view v-else>
				<view class="tex3">{{edetail.content}}</view>
			</view>

		</view>

		<button v-if="appid==0" class="bon" @click="toJoin(edetail.id)">报名参加</button>
		<button v-else class="bon1">已加成功报名</button>
	</view>
</template>

<script>
	import Vue from "vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getActivitiesByid,
		queryActUserInfo,
		addActUserInfo
	} from "@api"
	export default {
		"name" : "activityDetail",
		data() {
			return {
				edetail: [],
				id: 2,
				size: 10,
				page: 0,
				type: 1, //更据tpye来判断当前页是总通讯页还是查询页 1:总通讯页 2：查询页
				name: '',
				appid: 0,
				userInfo :{},
				token : ""
			}
		},
		computed:{
		   ...mapState(['USER'])
		},
		onLoad(e) {
			this.userInfo = this.USER.userInfo;
			this.token = this.USER.token;
			getActivitiesByid({
					activitiesId: e.id
				})
				.then(res => {
					this.edetail = res[0];
				})
			
			if(this.token == '' || this.token == 1 || this.token == 2){
				
				return;
			}else{
				this.queryActUserInfo(e.id);
			}
		},
		methods: {
			queryActUserInfo(id) {
				var that = this;
				queryActUserInfo({
						id: id,
						userId: that.userInfo.id
					})
					.then(res => {
						that.appid = res.id;
					})
			},
			toDate: function(time) {
				let date = new Date(time); //获取一个时间对象
				let dateString = date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate();
				//console.log(dateString)
				return dateString;
			},
			srcImage(path) {
				return this.$t.getImageUrl(path);
			},
			toJoin(id) {
				let that = this;
				if(this.token == '' || this.token == 1 || this.token == 2){
					uni.showToast({
						title: "请先去认证！",
						icon: 'none',
						duration: 2000
					});
					return;
				}else{
					addActUserInfo({
							activitiesId: id,
							userId: that.userInfo.id,
							name: that.edetail.name,
							type: that.userInfo.wxNickName
						})
						.then(res => {
							that.appid = res.id;
							if (that.appid > 0 && that.token == 2){
								uni.showToast({
									title: "报名参加活动成功！",
									icon: 'none',
									duration: 2000
								});
							}
						})
				}
			}
		}
		
	}
</script>

<style>
	.nothing {
		text-align: center;
	}

	.all {
		background-color: #F8F8F8;
		height: auto;
	}

	.ima {
		width: 100%;
		height: 400rpx;
	}

	.table {
		height: 448rpx;
		background-color: #FFFFFF;
	}

	.tit {
		margin: 20rpx 20rpx;
		height: 80rpx;
		border-bottom: 1px solid #CCCCCC;
	}

	.tab {
		display: flex;
		margin: 20rpx 20rpx;
		font-size: 28rpx;
		color: #636363;
		height: 70rpx;
		border-bottom: 1px solid #CCCCCC;
	}

	.time {
		margin-left: 8rpx;
	}

	.pla {
		margin-left: 8rpx;
	}

	.tab1 {
		height: 250rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.tex {
		display: flex;
		font-size: 35rpx;
		color: #333333;
		margin: 20rpx 20rpx;
		height: 70rpx;
		align-items: center;
		border-bottom: 1px solid #CCCCCC;
	}

	.tab2 {
		display: flex;
	}

	.tex1 {
		font-size: 35rpx;
		color: #333333;
		margin-top: 50rpx;
		margin-left: 20rpx;
	}

	.tex2 {
		font-size: 28rpx;
		color: #636363;
		margin-top: -70rpx;
		margin-left: 150rpx;
	}

	.tex3 {

		font-size: 28rpx;
		color: #333333;
		margin: 20rpx 20rpx;
		text-indent: 2em;
	}

	.tab3 {
		height: 350rpx;
		background-color: #FFFFFF;
	}

	.bon {
		color: #FFFFFF;
		background-color: #CB2921;
	}
	
	.bon1 {
		color: #FFFFFF;
		background-color: #e1e1e1;
	}
</style>
